<template>
	<gzPageWrapper
		ref="gzPageWrapperRef"
		:styles="{ background: '#f7f8fb' }"
		:up="{ textNoMore: '--暂无更多--', empty: { use: false } }"
		:down="{ use: true, auto: false }"
		:nav="{ use: false }"
		:scroll="{ top: 20, fixed: true }"
		@upCallback="upCallback"
	>
<!-- 		<template #top>
			<uni-segmented-control class="uni-tab" :current="vdata.tabCurrent" :values="vdata.tabItems" @clickItem="onClickTabItem" styleType="text" activeColor="#00A952"></uni-segmented-control>
		</template> -->
		<template #default>
			<view class="container">
				<goodsList :goodsList="vdata.goodsList"/>
			</view>
		</template>
	</gzPageWrapper>

</template>

<script setup>
	import goodsList from './goodsList.vue'
	import { ref, reactive } from 'vue';
	import { onShow, onLoad } from '@dcloudio/uni-app';
	import { $couponList } from '@/http/apiManager.js';
	import useGetList from '@/hooks/useGetList.js'
	import storageManage from '@/util/storageManage.js'
	import dayjs from 'dayjs'
	
	const gzPageWrapperRef = ref()
	let vdata = reactive({
		tabItems: ['待领取', '已领取', '已过期'],
		tabCurrent: 0,
		goodsList: [],	// 奖品列表
	});
	
	const params = reactive({
		couponState: 3
	})

	const onClickTabItem = ({ currentIndex }) => {
		if(vdata.tabCurrent == currentIndex) return
		vdata.tabCurrent = currentIndex
		switch (currentIndex){
			case 0:
				params.couponState = 3
				break;
			case 1:
				params.couponState = 1
				break;
			case 2:
				params.couponState = 2
				break;
			default:
				params.couponState = 3
				break;
		}
		gzPageWrapperRef.value.getMescroll().resetUpScroll()
	}
	/**
	 * 上拉刷新
	 */
	function upCallback(mescroll){
		const { num, size } = mescroll
		const pageNumber = num ? num : 1
		const pageSize = size ? size : 10
		$couponList({ virtualType:0, pageNumber, pageSize,awardType:2 }).then(({ bizData }) => {
			if(pageNumber == 1) vdata.goodsList = []
			vdata.goodsList = vdata.goodsList.concat(bizData.records)
			mescroll.endSuccess(bizData.records.length,bizData.hasNext)
		}).catch(() => {
			mescroll.endErr()
		})
	}
</script>

<style lang="less">
	.uni-tab{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
	}
	:deep(.segmented-control) {
		background: #fff;
		padding-bottom: 10rpx;
	}
	:deep(.segmented-control){
		background: #fff;
		padding-bottom: 10rpx;
	}
</style>